<!-- index组件的顶部导航栏组件 -->


<template>
    <div class="top-bar">
        <div class="left">
			<span class="iconfont icon-live"></span>
		</div>

        <div class="middle">
			<div class="item" @click="changeTop(0)">
				<router-link to="/index" tag="span" :class="topIndex==0?'active':'' ">
					推荐
				</router-link>
			</div>
			<div class="item" @click="changeTop(1)">
				<router-link to="/index" tag="span" :class="topIndex==1?'active':'' ">
					体育
				</router-link>
			</div>
					<div class="item" @click="changeTop(2)">
						<router-link to="/index" tag="span" :class="topIndex==2?'active':'' ">
							科技
						</router-link>
					</div>
					<div class="item" @click="changeTop(3)">
						<router-link to="/index" tag="span" :class="topIndex==3?'active':'' ">
							动漫
						</router-link>
					</div>
					<div class="item" @click="changeTop(4)">
						<router-link to="/index" tag="span" :class="topIndex==4?'active':'' ">
							娱乐
						</router-link>
					</div>
					<div class="item" @click="changeTop(5)">
						<router-link to="/index" tag="span" :class="topIndex==5?'active':'' ">
							日常
						</router-link>
					</div>
					<div class="item" @click="changeTop(6)">
						<router-link to="/index" tag="span" :class="topIndex==6?'active':'' ">
							游戏
						</router-link>
					</div>
		</div>




        <div class="right">
					<el-input
							v-show="ssFlag"
							placeholder="请输入关键字"
							v-model="input"
							clearable
							style="width: 50%"
					>
					</el-input>
			<span class="iconfont icon-sousuo" @click="change"></span>
		</div>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                topIndex:0,
							channelArr: [],
							ssFlag: false
            }
        },
			created() {


			},
			methods:{
				change(){
					this.ssFlag=!this.ssFlag;
				},
            changeTop(index){
                this.topIndex=index;
            }
        },
    }
</script>


<style scoped>
	.top-bar{
		position: fixed;
		width: 100%;
		height: 60px;
		font-size: 18px;
		color: #CCCCCC;
		padding: 20px;
		display: flex;
		box-sizing: border-box;
		z-index: 999;
	}
	.left, .right{
		width: 30%;
	}
	.right{
		text-align: right;
	}
	.iconfont{
		font-size:24px;	
	}
	.middle{
		width: 40%;
		display: flex;
		justify-items: center;
	}
	.middle .item{
		flex:1;
		text-align: center;
	}
	.middle .item span{
		padding: 5px 0;
	}
	.middle .item .active{
		color:#FFFFFF;
		border-bottom: 2px solid #ffffff;
	}

</style>
